<template>
  <div class="index-page">
    <a-input-search
      v-model:value="searchParams.text"
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    <!--测试-->
    <!--    {{ JSON.stringify(postList) }}-->
    <MyDivider />
    <a-tabs v-model:activeKey="activeKey" @change="onTabChange">
      <a-tab-pane key="post" tab="文章">
        <!-- 传递 postList 作为 prop 到 PostList.vue组件中 -->
        <!-- 也可理解为：该标签为父级组件，传递postList到子组件的js代码块中 -->
        <PostList :postList="postList" />
      </a-tab-pane>
      <a-tab-pane key="image" tab="图片" force-render>
        <ImageList :imageList="imageList" />
      </a-tab-pane>
      <a-tab-pane key="user" tab="用户">
        <UserList :userList="userList" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
//获取输入框输入的内容
import { ref, watchEffect } from "vue";
import PostList from "@/components/PostList.vue";
import UserList from "@/components/UserList.vue";
import ImageList from "@/components/ImageList.vue";
import MyDivider from "@/components/MyDivider.vue";
import { useRoute, useRouter } from "vue-router";
import MyAxios from "@/plugins/MyAxios";

const router = useRouter(); //操作url
const route = useRoute(); //获取页面url
//tab栏标签页，和动态路由后的url中的category变量值进行同步
const activeKey = route.params.category as string;

const postList = ref([]); //文章列表，数组类型
const userList = ref([]); //用户列表
const imageList = ref([]); //图片列表

//查询参数初始值【普通json对象，可直接作为json请求参数传递】
//loadData(initSearchParams);  √
const initSearchParams = {
  text: "",
  pageSize: 10,
  pageNum: 1,
};

//由ref创建的响应式对象【需要通过.value获取其的具体json数据，searchParams.value = initSearchParams】
//不可直接作为json请求参数传递【因为searchParams.vlaue才是一个json对象】
//loadData(searchParams.vlaue);  √
const searchParams = ref(initSearchParams);

//监听：当该方法中所使用到的参数发生变换时触发该方法
watchEffect(() => {
  //获取url中的text后的搜索内容，并将数据同步到当前页面
  searchParams.value = {
    //保留默认参数的其他属性值，同时允许特定属性（如 `text`）被动态更新
    //如果没有该属性则新增
    ...initSearchParams,
    text: route.query.text,
  } as never;
});

const loadData = (params: any) => {
  //解决调用后端接口时的请求查询字段不一致的问题【前端时text，后端查文章和图片的请求是searchText】
  //二次封装
  const postQuery = {
    ...params,
    searchText: params.text, //对象映射时会忽略text属性，而映射searchText
  };
  const userQuery = {
    ...params,
    userName: params.text, //对象映射时会忽略text属性，而映射userName
  };
  const imageQuery = {
    ...params,
    searchText: params.text, //对象映射时会忽略text属性，而映射searchText
  };

  //获取post列表的数据
  MyAxios.post("/post/list/page/vo", postQuery).then((res: any) => {
    //console.log(res); //由于封装的axios请求实例中通过拦截器处理了后端的响应结果，所以这里得到的res即为接口响应结果体[code、data、msg]中的data
    postList.value = res.records;
  });
  //获取user列表数据
  MyAxios.post("/user/list/page/vo", userQuery).then((res: any) => {
    //console.log(res); //由于封装的axios请求实例中通过拦截器处理了后端的响应结果，所以这里得到的res即为接口响应结果体[code、data、msg]中的data
    userList.value = res.records;
  });
  //获取image列表数据【Bing的访问有时候不问题，这里设置长一点的超时时间】
  MyAxios.post("/image/list/page/vo", imageQuery).then((res: any) => {
    //console.log(res); //由于封装的axios请求实例中通过拦截器处理了后端的响应结果，所以这里得到的res即为接口响应结果体[code、data、msg]中的data
    imageList.value = res.records;
  });
};

//首次访问页面时：第一次请求数据
loadData(initSearchParams);

//测试页面url获取:输出动态路由中设定的category变量值
//alert(route.params.category);

//onSearch函数
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const onSearch = (value: string) => {
  // alert(value);
  //将查询参数同步到url中:假设当前访问的页面为localhost:8080/a，输入框输入：test并回车后，访问地址变为localhost:8080/a?text=test&pageNum=1&pageSize=10
  router.push({
    query: searchParams.value,
  });
  //查询要搜索的目标数据
  loadData(searchParams.value);
};

//监听标签栏的切换，并将切换的标签同步到url中
const onTabChange = (key: string) => {
  router.push({
    //直接拼接到url中：/a  -->  /a/category
    path: `/${key}`,
    //带上之前的查询参数
    query: searchParams.value,
  });
};
</script>

<style scoped></style>
